﻿{extends file='main.tpl'}
{block name='title'}
    Panier
{/block}
{block name='content'}
{if $shirts|@count eq 0}
	<div class="divCenter">Aucun article dans le panier.</div>
{else}
    <a href="index.php?page=cart&cart=empty"><input type="button" name="cleanCart" value="Vider le panier" class="btnHead" /></a>
    <a href="index.php?page=store"><input type="button" name="backToStore" value="Retour à la boutique" class="btnHead" /></a>
    <div class="divCenter">
        <table>
            <tr>
                <th>Article</th>
                <th>Ref</th>
                <th>Description de l'article</th>
                <th>Prix à l'unité</th>
                <th>Quantité</th>
                <th>Total</th>
            </tr>
            {foreach name=outer item=shirt from=$shirts}
                <tr>

                    <td><img id="shirt-img-{$shirt.id}" class="shirtThumb" src="img/shirts/{$shirt.id}-small.png" alt="shirt" /></td>
                    <td>#{$shirt.ref}</td>
                    <td>

                        <form class="shirtForm" id="form-{$shirt.id}">

                            <b>{$shirt.brand}</b> - {$shirt.description} <br />
                            Sexe 
                            <input class="sexH" type="radio" name="sex" value="H" onclick="updateSex({$shirt.id})" {if $shirt.sex eq 'H'}checked{/if} >H</input>
                            <input class="sexF" type="radio" name="sex" value="F" onclick="updateSex({$shirt.id})" {if $shirt.sex eq 'F'}checked{/if} >F</input><br />
                            Taille 
                            <select name="size" class="shirtSize">
                                <option value="S" {if $shirt.size eq 'S'}selected{/if}>S</option>
                                <option value="M" {if $shirt.size eq 'M'}selected{/if}>M</option>
                                <option value="L" {if $shirt.size eq 'L'}selected{/if}>L</option>
                                <option value="XL" {if $shirt.size eq 'XL'}selected{/if}>XL</option>
                                <option value="XXL" {if $shirt.size eq 'XXL'}selected{/if}>XXL</option>
                            </select><br />

                            Couleur 
                            <span class="shirtColor" style="background-color:#e60024;" onclick="changeShirtColor({$shirt.id}, 'red');" ></span>
                            <span class="shirtColor" style="background-color:#d3d9e5;" onclick="changeShirtColor({$shirt.id}, 'grey');" ></span>
                            <span class="shirtColor" style="background-color:#ffd800;" onclick="changeShirtColor({$shirt.id}, 'yellow');" ></span>
                            <span class="shirtColor" style="background-color:#17a5de;" onclick="changeShirtColor({$shirt.id}, 'blue');" ></span>
                            <span class="shirtColor" style="background-color:#89d165;" onclick="changeShirtColor({$shirt.id}, 'green');" ></span>
                            <br />
                            <b>{$shirt.dispo}</b>
                            <input name="id" class="shirtID" type="hidden"  value="{$shirt.id}" />
                            <input name="color" class="shirtColorValue" type="hidden" />

                        </form>
                    </td>
                    <td>{$shirt.price}€</td>
                    <td><input name="quantity" type="number" name="quantity" min="1" value="{$shirt.quantity}" id="quantity-{$shirt.id}" onChange="updateSubPrice({$shirt.id}, {$shirt.price})" class="articleQuantity"/></td>
                    <td><span id="subTotal-{$shirt.id}" class="subTotal" >{$shirt.price}</span>€</td>


                </tr>


            {/foreach}
            <th colspan="4"></th>
            <th>
                <b>Montant Total</b><br />
                <b>Frais de port</b><br />
                <b>Réduction</b><br />
                <b>Total</b><br />
                Prochaine réduction<br />
            </th>
            <th>
                <span id="total"></span>€<br />
                <span id="fraisPort"></span>€<br />
                <span id="reduction">0</span>€<br />
                <b><span id="totalFinal"></span>€</b><br />
                <span id="nextReduction"></span>€<br />
            </th>
            <tr>
            </tr>
        </table>		
    </div>
    Saisir code promo: <input type="text" name="editPomo" value="">
    <a href="index.php?page=validation"><input type="button" name="validateOrder" value="Passer commande" class="btnFoot"></a> <br />
{/if}
{/block}

{block name='javascript'}
    <script type="text/javascript" src="pages/controller/js/store.js"></script>
    <script type="text/javascript" src="pages/controller/js/cart.js"></script>
    <script type="text/javascript">

	//JQuery main entry point
	$(document).ready(function() {
		{foreach name=outer item=shirt from=$shirts}
				changeShirtColor({$shirt.id}, '{$shirt.color}');
				updateSubPrice({$shirt.id}, {$shirt.price})
		{/foreach}

	   updateTotalPrice();

	});
    </script>
{/block}